<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/style.css">
    <style>
        * {
            font-size: 14px;
        }

    </style>
</head>

<body>

<div class="x-body">
    <form action="" class="layui-form ">

        <div class="people-Occupation tl2">
            <ul class="tl7">
                <li>姓名：<span>张三</span></li>
                <li>部门：<span>男</span></li>
                <li>职位：<span>市场专员</span></li>
            </ul>
        </div>
        <div class="Dismiss tl2">
            <div class=" left"><span class="left tl2">报销类型：</span>
                <div class="left top3 ">
                    <div class="layui-input-inline">
                        <input type="radio" name="jq" value="nan" title="已垫付">
                        <input type="radio" name="jq" value="nv" title="预支备用">
                        <input type="radio" name="jq" value="nv" title="申请付款">
                    </div>
                </div>
            </div>

        </div>
        <div class="Dismiss tl2">
            <div class=" left"><span class="left tl2">报销公司：</span>
                <div class="left">
                    <div class="layui-input-block top3">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">11</option>
                            <option value="1">22</option>
                            <option value="2">33</option>
                            <option value="3">44</option>
                            <option value="4">55</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="Reimbursement-box">
            <div class="addmoney"><img src="images/add2.png" class="addone"><img src="images/remove.png" alt=""
                                                                                 class="removeone"></div>
            <div class="reim-smallbox">
                <div class="layui-form-item">
                    <label class="layui-form-label">报销项目：</label>
                    <div class="layui-input-inline" style="width: 280px">
                        <input type="text" name="title" required lay-verify="required" placeholder="请严格按照发票上的项目或摘要内容填写"
                               autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">金额：</label>
                    <div class="layui-input-inline money-input" style="width: 100px">
                        <input type="number" name="number" required lay-verify="required" placeholder="￥"
                               autocomplete="off" class="layui-input moneynum">
                    </div>
                    <div class="left dx">
                        ￥ <span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="people-Occupation moneyAll">
            <ul>
                <li class="hj">合计金额：￥<span></span></li>
                <li class="bighj">人民币：<span></span></li>
            </ul>
        </div>


        <div class="people-Occupation Collect layui-form-item">
            <label class="layui-form-label">预支金额：</label>
            <div class="layui-input-inline">
                <input type="text" name="title" required lay-verify="required"
                       autocomplete="off" class="layui-input cllectmoney">
            </div>
            <div class="layui-form-mid layui-word-aux bigcollect"></div>
        </div>

        <div class="people-Occupation Collect">
            <label class="layui-form-label">报销金额：</label>
            <div class="layui-input-inline left">
                <input type="text" name="title" required lay-verify="required"
                       autocomplete="off" class="layui-input Reimbursement">
            </div>
            <div class=" bigReimbursement layui-word-aux left"></div>
            <div class="layui-input-inline  fp">
                <input type="radio" name="jq" value="nan" title="无发票">
                <input type="radio" name="jq" value="nv" title="有发票">
            </div>
        </div>
        <div><span class="left tl7">支付信息：</span>
            <div class="left sd2">
                            <textarea name="" required lay-verify="required" placeholder="请填写支付信息（商品链接等），如需账号密码请一并填写"
                                      class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="reim-smallbox">
            <div class="layui-form-item">
                <label class="layui-form-label">付款方式：</label>
                <div class="layui-input-inline ">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">支付宝</option>
                        <option value="1">微信</option>
                        <option value="2">银行卡</option>
                        <option value="3">线上支付</option>
                        <option value="4">其他（请说明）</option>
                    </select>
                </div>
                <label class="layui-form-label">账号：</label>
                <div class="layui-input-inline ">
                    <input type="text" name="number" required lay-verify="required"
                           autocomplete="off" class="layui-input ">
                </div>
            </div>
        </div>

        <div class="people-Occupation Collect layui-form-item">
            <label class="layui-form-label">使用时间：</label>
            <div class="layui-inline">
                <input type="text" id="test3" class="layui-input test-item" placeholder="yyyy-MM-dd">
            </div>
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test4" placeholder="HH:mm:ss">
            </div>
        </div>

        <div class="Dismiss tl2">
            <div class=" left"><span class="left tl2">是否支持对公转账：</span>
                <div class="left top3 ">
                    <div class="layui-input-inline">
                        <input type="radio" name="jq" value="nan" title="是" lay-filter="yes" >
                        <input type="radio" name="jq" value="nv" title="否" lay-filter="no">
                    </div>
                </div>
            </div>
            <div class="none dgzh">
                <label class="layui-form-label top3">转账公司：</label>
                <div class="layui-input-inline top3">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">11</option>
                        <option value="1">22</option>
                        <option value="2">33</option>
                        <option value="3">44</option>
                        <option value="4">55</option>
                    </select>
                </div>
            </div>

        </div>
        <div><span class="left tl7">报销事由：</span>
            <div class="left sd2">
                            <textarea name="" required lay-verify="required" placeholder="请填写报销理由"
                                      class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="clear"></div>
        <div class="  tl2">
            <span class="left tl2 tx-time">报销凭证：</span>
            <div class="left">

                <div class="layui-form-item tl1">
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon">&#xe67c;</i>上传文件
                    </button>
                </div>
            </div>
            <div class="left upTxt ">
                支持jpg、png、jpeg、gif、pdf格式文件
            </div>
            <div class="clear"></div>
            <div class="left upimg">
                <img src="images/bingli.png" alt="">
                <img src="images/bingli.png" alt="">
            </div>
        </div>


        <div class="clear"></div>

        <div class="layui-form-item">
            <button class="layui-btn ok" lay-filter="add" lay-submit="" style="margin-left:200px">
                提交
            </button>
            <button class="layui-btn layui-btn-primary" lay-filter="add" lay-submit="" style="margin-left:100px">
                取消
            </button>
        </div>
    </form>
</div>

<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script>

    //对公转账监听 是
    layui.use('form', function(){
            var form = layui.form;
            form.on('radio(yes)', function(data){
//                console.log(data.value); //被点击的radio的value值
                $(".dgzh").show();
            });
        form.on('radio(no)', function(data){
//                console.log(data.value); //被点击的radio的value值
            $(".dgzh").hide();
        });
        });
    $(".xx").click(function () {

        console.log(11)
    })
    //上传组件
    layui.use('upload', function () {
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , url: '/upload/' //上传接口
            , done: function (res) {
                //上传完毕回调
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
    //点击增加报销行
    $(".addone").click(function () {
        $(".Reimbursement-box").append(" <div class=\"reim-smallbox\">\n" +
            "                <div class=\"layui-form-item\">\n" +
            "                    <label class=\"layui-form-label\">报销项目：</label>\n" +
            "                    <div class=\"layui-input-inline\" style=\"width: 280px\" >\n" +
            "                        <input type=\"text\" name=\"title\" required  lay-verify=\"required\" placeholder=\"请严格按照发票上的项目或摘要内容填写\" autocomplete=\"off\" class=\"layui-input\" >\n" +
            "                    </div>\n" +
            "                    <label class=\"layui-form-label\" >金额：</label>\n" +
            "                    <div class=\"layui-input-inline money-input\" style=\"width: 100px\">\n" +
            "                        <input type=\"number\" name=\"number\" required  lay-verify=\"required\" placeholder=\"￥\" autocomplete=\"off\" class=\"layui-input moneynum\" >\n" +
            "                    </div>\n" +
            "                   <div class=\"left dx\">\n" +
            "                       ￥ <span></span>\n" +
            "                   </div>\n" +
            "                </div>\n" +
            "            </div>")
        zh();

    });
    $(".removeone").click(function () {//删除一行
        $(".Reimbursement-box .reim-smallbox:last-child").remove();
        //删除后再计算一遍合计
        js();
    })

    //    转换大写
    function zh() {
        $(".money-input>input").change(function () {
            var money = $(this).val();
            var bigmoney = convertCurrency(money);//转换大写
            $(this).parent().nextAll().children("span").html(bigmoney);
            js();
        })
    }

    function js() {//合计
        var sum = 0;
        for (var i = 0; i < $(".moneynum").length; i++) {
            var tt = $(".moneynum").eq(i).val();//每一个的金额
            sum += parseFloat(tt);
        }
        $(".hj span").html(sum);//合计金额
        var bigallmoney = convertCurrency(sum);
        $(".bighj span").html(bigallmoney);//合计大写
    }

    zh();
    //预支的大写计算
    $(".cllectmoney").change(function () {
        var money = $(this).val();
        var bigmoney = convertCurrency(money);//转换大写
        $(".bigcollect").html(bigmoney)
    })
    //报销的大写计算
    $(".Reimbursement").change(function () {
        var money = $(this).val();
        var bigmoney = convertCurrency(money);//转换大写
        $(".bigReimbursement").html(bigmoney)
    })

    //收集金额

    function convertCurrency(money) {
        //汉字的数字
        var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
        //基本单位
        var cnIntRadice = new Array('', '拾', '佰', '仟');
        //对应整数部分扩展单位
        var cnIntUnits = new Array('', '万', '亿', '兆');
        //对应小数部分单位
        var cnDecUnits = new Array('角', '分', '毫', '厘');
        //整数金额时后面跟的字符
        var cnInteger = '整';
        //整型完以后的单位
        var cnIntLast = '元';
        //最大处理的数字
        var maxNum = 999999999999999.9999;
        //金额整数部分
        var integerNum;
        //金额小数部分
        var decimalNum;
        //输出的中文金额字符串
        var chineseStr = '';
        //分离金额后用的数组，预定义
        var parts;
        if (money == '') {
            return '';
        }
        money = parseFloat(money);
        if (money >= maxNum) {
            //超出最大处理数字
            return '';
        }
        if (money == 0) {
            chineseStr = cnNums[0] + cnIntLast + cnInteger;
            return chineseStr;
        }
        //转换为字符串
        money = money.toString();
        if (money.indexOf('.') == -1) {
            integerNum = money;
            decimalNum = '';
        } else {
            parts = money.split('.');
            integerNum = parts[0];
            decimalNum = parts[1].substr(0, 4);
        }
        //获取整型部分转换
        if (parseInt(integerNum, 10) > 0) {
            var zeroCount = 0;
            var IntLen = integerNum.length;
            for (var i = 0; i < IntLen; i++) {
                var n = integerNum.substr(i, 1);
                var p = IntLen - i - 1;
                var q = p / 4;
                var m = p % 4;
                if (n == '0') {
                    zeroCount++;
                } else {
                    if (zeroCount > 0) {
                        chineseStr += cnNums[0];
                    }
                    //归零
                    zeroCount = 0;
                    chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                }
                if (m == 0 && zeroCount < 4) {
                    chineseStr += cnIntUnits[q];
                }
            }
            chineseStr += cnIntLast;
        }
        //小数部分
        if (decimalNum != '') {
            var decLen = decimalNum.length;
            for (var i = 0; i < decLen; i++) {
                var n = decimalNum.substr(i, 1);
                if (n != '0') {
                    chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                }
            }
        }
        if (chineseStr == '') {
            chineseStr += cnNums[0] + cnIntLast + cnInteger;
        } else if (decimalNum == '') {
            chineseStr += cnInteger;
        }
        return chineseStr;
    }

    $(".ok").click(function () {
        layer.msg('已提交!', {icon: 1, time: 2000});
    })
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test3'
        });

        laydate.render({
            elem: '#test4'
            , type: 'time'
        });

    });

</script>

</body>

</html>